<template>
	<view>
		<!-- 搜索栏 -->
		<view class="home_seek">
			<view class="se_seekBlock">
				<uni-search-bar @confirm="search" @input="valueAlter" @clear="clearSearch" :radius="200" bgColor="#f5f5f5" :placeholder="seek.list && seek.list[0].title" v-model="keyword"
					cancelButton="none">
					<uni-icons slot="searchIcon" color="#999999" size="25" type="search" class="home_seIco" />
				</uni-search-bar>
			</view>
			<view class="se_content">
				<!-- 关键字页 -->
				<view class="se_keywordPage" v-show="!seekOn">
					<view class="se_block" v-if="history.list">
						<view class="se_ti"><text>历史记录</text></view>
						<view class="se_ul">
							<text v-for="item in history.list" @click="search({value:item.title})" :key="item.id">{{item.title}}</text>							
						</view>
						<view class="se_close" @click="deleteHistory"></view>
					</view>
					<view class="se_block">
						<view class="se_ti"><text>热门搜索</text></view>
						<view class="se_ul">
							<text v-for="item in seek.list" @click="search(item.title)" :key="item.id">{{item.title}}</text>	
						</view>
					</view>
				</view>
				<!-- 关键字提示页 -->
				<view class="se_keywordList">
					<view class="seK_ul">
						<view class="seK_li"><text>画画简笔画</text><text class="num">{{listData.length}}篇笔记</text></view>
						<view class="seK_li"><text>画画简笔画</text></view>
						<view class="seK_li"><text>画画简笔画</text></view>
						<view class="seK_li"><text>画画简笔画</text></view>
						<view class="seK_li"><text>画画简笔画</text></view>
						<view class="seK_li"><text>画画简笔画</text></view>
						<view class="seK_li"><text>画画简笔画</text></view>
					</view>
				</view>
				<!-- 搜索结果页 -->
				<view class="se_contentPage" v-show="seekOn">
					<view class="myN_ul">
						<view :class="['myN_li',n == blockOn ? 'active':'']" v-for="(item,n) in blockName" @click="cutBlock(n)" :key="n"><text>{{item}}</text></view>
					</view>
					<view class="se_swiper">						
						<view class="seCo_ulBlock">							
							<view class="seCo_liBlock" v-show="blockOn===0">
								<view class="seCo_block">
									<text class="seCo_te">{{listData.length}}篇笔记</text>
									<picker mode="selector" :range="sortList" :value="sortIndex" @change="sortChange" class="seCo_picker">
										<text>{{sortList[sortIndex]}}</text>
									</picker>
								</view>
								<data-list :listData="listData"></data-list>
							</view>	
							<view class="seCo_liBlock" v-show="blockOn===1">
								<view class="seCo_ul">		
									<view class="seCo_li">
										<image src="../../static/uni.png" class="coUe_img"/>
										<view class="coUe_block">
											<text class="title">迷你小手工</text>
											<text class="note">笔记</text><text class="fans">粉丝</text>
										</view>
										<view class="coUe_attention" :class="{'active':attention}" @click="cutAttention">{{attention ? '不关注' : '关注'}}</view>
									</view>
								</view>
							</view>						
						</view>
					</view>					
				</view>
			</view>
		</view>
		<uni-popup ref="popup" type="dialog">
		    <uni-popup-dialog mode="base" message="成功消息" :duration="2000" :before-close="true" @close="close" @confirm="confirm">确定不再关注?</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import dataList from '../../components/dataList.vue'
	export default {
		data() {
			return {
				sortList: ['综合排序', '按时间排序', '按热度排序'],
				sortIndex: 0,
				listData:[],//列表数据,
				thisData:{} ,//当前数据,
				blockName:['全部','用户'], //块名称
				blockOn:0 ,//块索引
				attention:0, //关注
				history:{}, //历史记录
				seek:{} ,//热门搜索
				seekOn:false,//搜索开关.
				keyword:'' //关键字
			}
		},
		components: {
			dataList
		},
		onLoad(arg){			
			this.getHistory() //获取历史搜索记录
			this.getSeek() //获取历史搜索记录
		},
		methods: {
			//排序
			sortChange(e) {
				this.sortIndex = e.target.value
				//按点赞排序
				if(this.sortIndex === 2){ 
					this.listData.sort(function(a,b){
						return b.text3 - a.text3
					})
				}
			},			
			//历史记录
			async getHistory(){
				const {data:res} = await this.$http({
					url: 'd_history?pagenum=0&&pagesize=10'
				})	
				this.history = res.data
			},
			//删除历史记录
			deleteHistory(){				
				this.history.list.forEach((item)=>{
					this.$http({
						url:`d_history?id=${item.id}`,
						method:'DELETE'						
					})
				})	
				this.history = {}			
			},
			//热门搜索
			async getSeek(){
				const {data:res} = await this.$http({
					url: 'd_seek?pagenum=0&&pagesize=10'
				})	
				this.seek = res.data
			},
			//切换全部/用户
			cutBlock(n){
				this.blockOn = n
			},
			//关注
			cutAttention(){				
				if(this.attention){
					this.$refs.popup.open('dialog')						
				}else{
					this.attention = !this.attention
				}	
			},
			//关闭提示框
			close() {			
				this.$refs.popup.close()
			},
			//关闭提示框并确认不再关注
			confirm(){
				this.attention = !this.attention
				this.close()
			},
			//搜索
			async search(value){
				//设置默认搜索热门搜索第一个关键字
				if(!value.value){ 
					value.value = this.seek.list && this.seek.list[0].title
					console.log(value)
				}
				//向后端请求关键字数据
				let seek = encodeURI(value.value)
				const {data:res} = await this.$http({
					url: `d_list?seek=${seek}`
				})					
				this.listData = res.data //列表
				this.seekOn = true; //显示搜索列表块
				this.keyword = value.value //放致于搜索框中的关键字
			},
			//清除搜索
			clearSearch(){
				this.getHistory() //获取历史搜索记录
				this.seekOn = false;				
			},
			//关键词提示
			valueAlter(value){
				//console.log(value)
			}			
		}
	}
</script>

<style lang="scss">
	@import '@/static/common.scss';

	page {
		background: #f4f8fb;
	}

	.se_seekBlock {
		position: fixed;
		top: –window-top;
		left: 0;
		z-index: 120;
		width: 100%;
		height: 115rpx;
		border-bottom: 1px solid #eee;
		background: #fff;
	}

	.se_content {
		position: relative;
		width: 100%;
		margin: auto;
		margin-top: –window-top;
		padding-top: 115rpx;
	}

	.se_keywordPage {
		position: relative;
		width: 92%;
		margin: auto;
	}

	.se_block {
		padding: 25rpx 0;
		position: relative;
		width: 100%;
	}

	.se_ti {
		font-size: 16px;
		margin-bottom: 20rpx;
	}

	.se_ul {
		position: relative;
		width: 100%;

		text {
			background: #f6f6f6;
			padding: 5rpx 20rpx;
			border-radius: 200rpx;
			margin-right: 30rpx;
			margin-bottom: 20rpx;
			display: block;
			float: left;
		}
	}

	.se_ul:after {
		content: "";
		display: block;
		clear: both;
	}

	.se_close {
		position: absolute;
		right: 0;
		top: 10rpx;
		width: 60rpx;
		height: 60rpx;
		background: url(../../static/images/b2_4.png) no-repeat center;
		background-size: 32rpx;
	}

	/* 关键字列表 */
	.se_keywordList {
		position: relative;
		width: 100%;
		display: none;
	}

	.seK_li {
		position: relative;
		border-bottom: 1px solid #ddd;
		padding: 20rpx 4%;

		.num {
			position: absolute;
			right: 4%;
			top: 20rpx;
			color: #999;
		}
	}

	/* 搜索结果页 */
	.se_contentPage {
		position: relative;
		width: 100%;		
	}

	.myN_ul {
		position: relative;
		width: 100%;
		text-align: center;
		border-bottom: 1px solid #eee;
		height: 100rpx;
		background: #fff;
		overflow: hidden;
		border-radius: 20rpx 20rpx 0 0;
		box-shadow: 0 0 3rpx 0 #ddd;
	}

	.myN_li {
		display: inline-block;
		margin: 0 60rpx;
		padding: 25rpx 0;
		font-size: 16px;
		position: relative;
		opacity: 0.6;
	}

	.myN_li.active {
		opacity: 1;
	}

	.myN_li:after {
		content: "";
		display: block;
		width: 0%;
		border-bottom: 2px solid $ulColor;
		margin: auto;
		margin-top: 5rpx;
		transition: all 0.3s;
		;
	}

	.myN_li.active:after {
		width: 100%;
	}

	.seCo_block {
		position: relative;
		margin-top: 20rpx;
		background: #fff;
		height: 100rpx;
		box-shadow: 0 0 8rpx 0 #ddd;
	}

	.seCo_te {
		position: absolute;
		top: 30rpx;
		left: 4%;
	}

	.seCo_picker {
		text-align: right;
		padding: 30rpx 4%;
		padding-right: 10%;
		width:50%;
		float: right;
		z-index: 90;
		text {
			padding-right: 30rpx;
			background: url(../../static/images/b2_6.png) no-repeat right;
			background-size: 20rpx;
		}
	}	
	
	.seCo_ul {position: relative;width:100%;margin-top:20rpx;background: #fff;}
	.seCo_li {position: relative;width:92%;border-bottom:1px solid #eee;padding:30rpx 4%;}
	.coUe_img {width:115rpx;height:115rpx;border-radius:200px;position: relative;overflow: hidden;}
	.coUe_block {
		position: absolute;top:50rpx;left:170rpx;color:#999;
		.title {font-size:18px;display: block;color:#666}
		.note {margin-right:20rpx;}
	}
	.coUe_attention {position: absolute;right:4%;top:60rpx;padding:4rpx 25rpx;border:1px solid #999;border-radius: 10rpx;}
	.coUe_attention.active {border:1px solid #1296db;color:#1296db;}
</style>
